<script setup lang="ts">
import { ref } from 'vue';
import { useNameIntroStore } from "../stores/name_intro"
import { onBeforeRouteLeave } from 'vue-router'
import { updateUser } from '@/apis/updateUser';

const user = app.queryUser()
const store = useNameIntroStore()
const intro = ref('')
onBeforeRouteLeave(async (to, from, next) => {
  if (intro.value.trim() != '') {
    store.intro = intro.value
    user.intro = intro.value
    await updateUser(user)
  }
  next()
})
</script>

<template>
  <van-cell-group inset class="textArea">
  <van-field
    v-model="intro"
    autosize
    placeholder="请填写简介，填写完成后返回即可保存"
  />
  </van-cell-group>
</template>

<style lang="css" scoped>
.textArea {
    margin-top: 20px;
}
</style>